<template>
  <div class="position">
    北京理工大学国防教育部
  </div>
  <div class="search">
    闪回会员商品优惠上带你
  </div>
  <div class="banner">
    <img class="banner__img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg">
  </div>
  <div class="icons">
    <div class="icons__item" v-for="(item,index) in iconsLsit" :key="index">
      <img class="icons__item__img" :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" />
      <p class="icons__item__desc">{{item.desc}}</p>
    </div>

  </div>
  <div class="gap"></div>
</template>

<script>
export default {
  name: 'StaticPart',
  setup () {
    const iconsLsit = [{
      imgName: '红包',
      desc: '红包便利'
    }, {
      imgName: '菜市场',
      desc: '菜市场'
    }, {
      imgName: '签到',
      desc: '签到便利'
    }, {
      imgName: '鲜花',
      desc: '鲜花绿植'
    }, {
      imgName: '医药健康',
      desc: '医药健康'
    }, {
      imgName: '蛋糕',
      desc: '烘培蛋糕'
    }]
    return { iconsLsit }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/virables';
.position{
  padding: .16rem .24rem .16rem 0 ;
  line-height: .22rem;
  font-size: .16rem;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: .24rem;
  color: $content-fontcolor;
}
.search{
  line-height: .32rem;
  background: #f5f5f5;
  color: #B7B7B7;
  border-radius: .16rem;
  font-size: .14rem;
  padding-left: .2rem;
  vertical-align: middle;
  margin-bottom: .12rem;
}
.banner{
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;
  &__img{
    width:100% ;
  }
}
.icons{
  display: flex;
  flex-wrap: wrap;
  margin-top: .16rem;
  &__item{
    width: 20%;
    &__img{
      display: block;
      width: .4rem;
      height: .4rem;
      margin: 0 auto;
    }
    &__desc{
      margin: .06rem 0 .16rem 0;
      text-align: center;
      color: $content-fontcolor;
    }
  }
}
.gap{
  margin: 0 -.18rem;
  height: .1rem;
  background: #f1f1f1
}
</style>
